<template>
    <!--电脑屏幕导航条-->
    <div class="sideBar">
        <div class="wrap">
            <div class="myImg">
                <!-- <el-avatar :size="150" :src="comment.imgpath" @error="() => true">
                    <el-avatar :size="150"> {{ comment.name }} </el-avatar>
                </el-avatar> -->
                <img src="@/assets/lunai.jpg" alt="" />
                <h1>{{ navName }}</h1>
                <p>“ Hang on to your dream ”</p>
            </div>
            <ul>
                <router-link v-for="(one, index) in nav" :key="index" :to="one.url">
                    <li :class="{ active: index == selectItem }">
                        <span class="iconfont category" :class="one.icon"></span>{{ one.name }}
                    </li>
                </router-link>
            </ul>
            <ul>
                <li>项目代码</li>
                <li class="contact">
                    <a href="https://gitee.com/suoyue/runblog-frontend" target="_blank" title="前端代码">
                        <span class="iconfont icon-github"></span>
                    </a>
                    <a href="https://gitee.com/suoyue/runblog" target="_blank" title="node后端代码">
                        <span class="iconfont icon-github"></span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>

export default {
    name: "computerNav",
    props: ["nav", "selectItem", "navName"],
};
</script>

<style scoped lang="less">
.sideBar {
    display: flex;
    flex-direction: column;
    width: 350px;
    min-height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    text-align: center;
    background: #353d47;
    margin: auto 0px;
    padding: 10px 0;
    box-sizing: border-box;
    overflow: auto;

    .wrap {
        margin: auto 0;

        .myImg {
            img {
                width: 150px;
                height: 150px;
                border-radius: 50%;
            }

            h1 {
                margin-top: 10px;
                font-size: 30px;
                color: white;
            }

            p {
                margin: 10px 0;
                color: white;
                font-size: 18px;
            }
        }

        .search {
            width: 200px;
            height: 25px;
            margin: 20px auto;
            background: white;
            text-align: left;
            border-radius: 10px;

            input {
                width: 150px;
                margin-left: 10px;
                border: none;
                outline: none;
            }

            .iconfont {
                margin-left: 13px;
                vertical-align: middle;
                font-size: 18px;
                cursor: pointer;
            }

            a {
                text-decoration: none;
            }
        }

        ul {
            margin-top: 15px;
            list-style-type: none;
            padding: 0;

            .category {
                font-size: 20px;
            }

            a {
                margin-top: 20px;
                text-decoration: none;
                outline: none;
                color: white;
            }

            li {
                font-size: 20px;
                color: white;
                line-height: 45px;

                span {
                    font-size: 35px;
                    margin: 10px;
                }
            }

            li:after {
                content: "";
                width: 0px;
                height: 45px;
                background: white;
                position: absolute;
                z-index: -1;
                left: 0;
                transition: all 0.3s linear;
            }

            a:hover li::after {
                width: 100%;
                background: #409eff;
            }

            .active {
                background: #409eff;
            }

            .contact {
                margin-top: 30px;
            }

            .contact span {
                background: transparent;
            }

            // github和博客园图标渐变
            .contact span:hover {
                // 文字颜色设置为透明
                color: transparent;
                //利用linear-gradient实现背景的静态渐变
                background-image: linear-gradient(to right,
                        #3498db 25%,
                        #f47920 50%,
                        #3498db 75%,
                        #f47920 100%);
                //基本新版本浏览器都兼容background-clip:text,表示只在文字内容处显示背景
                -webkit-background-clip: text;
                background-size: 300%;
                animation: flash 1s infinite linear;
            }
        }
    }
}

@keyframes flash {
    0% {
        /*background-position 左上角是 0 0，右边为正，下边为正*/
        background-position: 0 0;
    }

    100% {
        background-position: 100% 0;
    }
}

@media screen and (max-width: 900px) {
    .sideBar {
        display: none;
    }
}
</style>